<template>
	<view style="padding: 30rpx;">
		<button @click="onSetTimeCall()">单次定时器setTimeout</button>
		<button @click="onSetTimeCallxy(userName,password)">带参数setTimeout</button>
		<button @click="onTimeoutClear()" type="warn">取消定时器</button>
		<button @click="onInteral()" type="primary">周期打印</button>
		<button @click="onClearInteral()" type="default">取消周期打印</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userName: 'yhb',
				password: '666',
				timeoutId: null,  // 单次定时器ID
				count: 0,         // 计数器
				interalID: null   // 周期定时器ID（初始化为null更规范）
			}
		},
		methods: {
			onSetTimeCall(){
				console.log("onSetTimeCall-->");
				// 先清除可能存在的旧定时器，避免重复触发
				if (this.timeoutId) {
					clearTimeout(this.timeoutId);
				}
				// 保存定时器ID，用于后续取消
				this.timeoutId = setTimeout(()=>{
					console.log("我演示3秒才会打印");
					this.timeoutId = null;  // 执行后清空ID
				},3000)
			},
			onSetTimeCallxy(name,pwd){
				console.log("onSetTimeCallxy--> name:"+name+",pwd:"+pwd);
				// 带参数的定时器
				setTimeout((x,y)=>{
					console.log("我可以传参数了> x:"+x+",y:"+y);
				},2000,name,pwd)
			},
			// 修复：将定时器取消方法移到methods中（原代码放在了methods外面）
			onTimeoutClear(){
				if (this.timeoutId) {
					console.log("onTimeoutClear--->定时器被取消了：" + this.timeoutId);
					clearTimeout(this.timeoutId);
					this.timeoutId = null;  // 取消后清空ID
				} else {
					console.log("没有可取消的单次定时器");
				}
			},
			onInteral(){
				// 先清除可能存在的旧周期定时器，避免叠加
				if (this.interalID) {
					clearInterval(this.interalID);
				}
				// 保存周期定时器ID
				this.interalID = setInterval(()=>{
					this.count++;  // 修复：计数器自增（原代码未自增）
					console.log("周期打印count:", this.count);
				},1000)
			},
			onClearInteral(){
				if (this.interalID) {
					console.log("onClearInteral: 取消周期定时器", this.interalID);
					clearInterval(this.interalID);
					this.interalID = null;  // 取消后清空ID
					this.count = 0;  // 可选：重置计数器
				} else {
					console.log("没有可取消的周期定时器");
				}
			}
		}
	}
</script>

<style>
button{
	margin: 20rpx 0;  /* 增加按钮间距，优化显示 */
}
</style>